<template>
  <div>
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      shape="round"
      v-model.trim="keyword"
      show-action
      @input="hInput"
      placeholder="请输入搜索关键词"
    >
      <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action" @click="hSearch">搜索</div>
    </van-search>

    <!-- 2. 搜索建议 -->
    <van-cell-group v-if="suggestions.length">
      <van-cell
        v-for="(item, idx) in cSuggestions"
        :key="idx"
        icon="search"
        @click="hClickSuggestion(idx)"
      >
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />
      <van-cell
        v-for="(item, idx) in history"
        :title="item"
        :key="idx"
        @click="jumpResult(item)"
      >
        <!-- 阻止事件冒泡 -->
        <van-icon name="close" @click.stop="delHistory(idx)"></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { saveHistory, getHistory } from '@/utils/storageHistory'
import { getSuggestion } from '@/api/search'
import escapeRegExp from '@/utils/escapeRegExp.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 用来动态获取用户搜索的词汇
      suggestions: [], // 用来保存获取来的搜索建议
      history: getHistory() || [] // 用来保存用户输入的历史记录
    }
  },
  computed: {
    // 将suggestions中的每一项替换为一个新的字符串（处理成高亮显示的字符串）渲染到页面中
    cSuggestions () {
      const keyword = escapeRegExp(this.keyword)
      // console.log(keyword)
      const reg = new RegExp(keyword, 'gi')
      // 对原数据 suggestions中的每一项都做正则匹配，得到高亮之后的字符串
      return this.suggestions.map(sug => sug.replace(reg, val => `<span style="color:red">${val}</span>`))
    }
  },
  methods: {
    hInput () {
      // 若计时器存在则消除计时器
      this.timer && clearTimeout(this.timer)
      // 创建计时器（在用户输入完毕之后在发送请求）
      this.timer = setTimeout(async () => {
        if (this.keyword === '') {
          this.suggestions = []
          return
        }
        try {
          const { data: { data } } = await getSuggestion(this.keyword)
          this.suggestions = data.options
        } catch (error) {
          console.log(error)
        }
      }, 600)
    },
    // 添加历史记录
    addHistory (keyword) {
      // 不能有重复，在前面添加
      const idx = this.history.findIndex(item => item === keyword)
      // 若找到重复的先删除后添加，保证后面搜索的记录一直在前面
      idx !== -1 && this.history.splice(idx, 1)
      this.history.unshift(keyword)
      // 历史记录的持久化
      saveHistory(this.history)
    },
    hSearch () {
      // 若有值便添加历史记录
      if (this.keyword) { this.addHistory(this.keyword) }
      // 进行页面的跳转 => 搜索结果页面
      if (!this.keyword) return
      this.$router.push('/search/result?keyword=' + this.keyword)
    },
    // 用户点击了某个搜索建议
    hClickSuggestion (idx) {
      // 若有值便添加
      if (this.keyword) { this.addHistory(this.suggestions[idx]) }
      // 点击时并将其添加到搜索框中
      this.keyword = this.suggestions[idx]
      // 进行页面的跳转 => 搜索结果页面
      this.$router.push('/search/result?keyword=' + this.suggestions[idx])
    },
    // 删除历史记录
    delHistory (idx) {
      this.history.splice(idx, 1)
      // 历史记录的持久化
      saveHistory(this.history)
    },
    // 点击历史记录进行跳转页面
    jumpResult (keyword) {
      // 进行页面的跳转 => 搜索结果页面
      this.$router.push('/search/result?keyword=' + keyword)
      this.keyword = keyword
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
</style>
